<template>
	<view class="login-page">
		<!-- 顶部蓝色背景区域 -->
		<view class="header-section">
			<view class="header-bg">
				<image class="bg-pattern" src="/static/index/组 6.png" mode="aspectFill"></image>
			</view>
			<view class="header-content">
				<text class="welcome-title">欢迎来到车联网服务平台商家端</text>
				<view class="illustration">
					<image class="car-illustration" src="/static/index/组 6(1).png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 登录表单区域 -->
		<view class="form-section">
			<view class="form-container">
				<!-- 账号输入框 -->
				<view class="input-group">
					<input class="input-field" type="text" placeholder="请输入手机号" v-model="mobile" maxlength="20" />
				</view>

				<!-- 密码输入框 -->
				<view class="input-group">
					<input type="number" v-model="code" class="code" placeholder="请输入验证码" />
					<text class="getCode" @click="getCode">获取验证码</text>
				</view>

				<!-- 立即注册链接 -->
				<view class="register-link" @click="goToRegister">
					<text class="register-text">立即注册></text>
				</view>

				<!-- 登录按钮 -->
				<button class="login-btn" @click="handleLogin">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				mobile: '',
				code: '',
				mid:'',
				password: '123456',
				userInfo: {},
			}
		},
		methods: {
			/* 登录的业务流程：
			 1、首先根据输入的手机号获取验证码
			 2、输入验证码之后
				首先需要验证验证码是否正确
					错误：提示验证码错误
					正确：根据用户的手机号，查询店铺的信息，判断店铺的状态
						auditStatus为3：审核未通过
						auditStatus为2：正在审核中
						auditStatus为1：审核通过，调用登录接口进行登录，然后将返回的Token存到Redis中
			 
			 
			 */
			handleLogin() {
				/* 先表单验证 */
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}

				/* 验证验证码是否正确 */
				uni.request({
					url: `http://localhost:8080/merchant/shop/verifyCode`,
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						mobile: this.mobile,
						code: this.code
					},
					success: (res1) => {
						console.log("验证码验证返回结果：", res1);
						// 检查业务逻辑是否成功
						if (res1.data && res1.data.code === 200) {
							console.log("验证码验证成功");
							this.shopLogin();
						} else {
							// 验证码验证失败
							uni.showToast({
								title: res1.data.msg || '验证码错误',
								icon: 'error'
							});
							// 清空验证码输入框
							this.code = '';
						}
					},
					fail: (err) => {
						console.log("验证码验证请求失败：", err);
						uni.showToast({
							title: '验证码验证失败，请重试',
							icon: 'error'
						});
						// 清空验证码输入框
						this.code = '';
					}
				})

			},

			/* 根据手机号来判断是否注册成功 */
			shopLogin() {
				uni.request({
					url: `http://localhost:8080/merchant/shop/shopLogin?userName=${this.mobile}`,
					method: 'GET',
					success: (res2) => {
						console.log("返回的店铺状态为：", res2);
						// 检查请求是否成功
						if (res2.data && res2.data.code === 200) {
							if (res2.data.data.auditStatus === 1) {
								/* 调用登录接口 */
								this.mid=res2.data.data.id;
								this.login(this.mobile)
							} else if (res2.data.data.auditStatus === 2) {
								uni.showToast({
									title: '店铺正在审核中',
									icon: 'none'
								})
								this.mobile = "";
								this.code = "";
							} else if (res2.data.data.auditStatus === 3) {
								uni.showToast({
									title: '店铺审核未通过',
									icon: 'error'
								})
								this.mobile = "";
								this.code = "";
							}
						} else {
							// 服务器返回业务错误
							uni.showToast({
								title: res2.data.msg || '查询店铺信息失败',
								icon: 'error'
							});
							this.mobile = "";
							this.code = "";
						}
					},
					fail: (err) => {
						console.log("查询店铺信息失败：", err);
						uni.showToast({
							title: '手机号未注册或网络错误',
							icon: 'error'
						})
						this.mobile = "";
						this.code = "";
					}
				})
			},




			/* 修改后的登录方法 */
			login(phone) {
				uni.request({
					url: 'http://localhost:8080/auth/sms/token',
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						phone: phone
					},
					success: (res) => {
						console.log("登录成功，返回的token为：", res);
						if (res.data.code === 200) {
							// 使用VueX保存token和用户信息
							const token = res.data.data.access_token;
							console.log("准备存储的token：", token);

							// 调用VueX的action来保存登录信息
							this.$store.dispatch('loginSuccess', {
								token: token,
								mobile: this.mobile,
								mid: this.mid,
								userInfo: res.data.data.userInfo || {}
							});

							// 验证存储是否成功
							const storedToken = this.$store.getters.getToken;
							
							console.log("存储后的token：", storedToken);
							console.log("存储后的店铺id",this.mid);

							uni.navigateTo({
								url: '/pages/index/index'
							})
						} else {
							console.log("登录失败，返回数据：", res.data);
							uni.showToast({
								title: res.data.msg || '登录失败',
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						console.error('登录失败:', err);
						uni.showToast({
							title: '登录失败',
							icon: 'error'
						})
					}
				})
			},

			// 跳转到注册页面
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},

			getCode() {
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				console.log("获取验证码接口");
				uni.request({
					url: `http://localhost:8080/merchant/shop/sendCode?mobile=${this.mobile}`,
					method: 'POST',
					success: (res) => {
						uni.showToast({
							title: '验证码发送成功',
							icon: 'none'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '验证码发送失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.login-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
	}

	.status-bar {
		background-color: #007AFF;
	}

	/* 顶部蓝色背景区域 */
	.header-section {
		position: relative;
		height: 50vh;
		background-color: #007AFF;
		overflow: hidden;
	}

	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.bg-pattern {
		width: 100%;
		height: 100%;
	}

	.header-content {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 0 60rpx;
	}

	.welcome-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 60rpx;
		line-height: 1.4;
	}

	.illustration {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.car-illustration {
		width: 300rpx;
		height: 200rpx;
	}

	/* 登录表单区域 */
	.form-section {
		position: relative;
		z-index: 3;
		margin-top: -40rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		min-height: 50vh;
		padding: 60rpx 60rpx 40rpx;
	}

	.form-container {
		display: flex;
		flex-direction: column;
	}

	/* 输入框组 */
	.input-group {
		position: relative;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e9ecef;
		transition: all 0.3s ease;
		justify-content: space-between;
	}

	.input-group:focus-within {
		border-color: #007AFF;
		background-color: #fff;
		box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
	}

	.input-field {
		flex: 1;
		height: 88rpx;
		font-size: 32rpx;
		color: #333;
		background: transparent;
		border: none;
		outline: none;
	}

	.input-field::placeholder {
		color: #999;
		font-size: 30rpx;
	}

	/* 立即注册链接 */
	.register-link {
		margin-bottom: 60rpx;
	}

	.register-text {
		color: #007AFF;
		font-size: 28rpx;
	}

	/* 登录按钮 */
	.login-btn {
		background-color: #007AFF;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		height: 88rpx;
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.login-btn:active {
		background-color: #0056CC;
	}

	.code {
		height: 80rpx;
	}

	.getCode {
		font-size: 20rpx;
		color: #007AFF;
	}
</style>